<template>
	<view style="background: linear-gradient(to bottom,#00d79c,#ececec); margin-top: 0rpx; height: 600rpx;">
		<uni-drawer ref="showLeft" mode="left" :width="320"  @change="change($event,'showLeft')">
					<view class="close">
						<view style="margin-top: 20rpx; margin-left: 20rpx;">
							<view style="width: 100%; text-align: center;">
								<text>请选择地址</text>
							</view>
							<view class="addrs-item" v-for="(item,index) in addressList" :key = "index" style="display: flex; justify-content: space-between;" @click="chooseAddr(index)">
								<view>
									<text>{{item.addrContact}}</text>
									<text style="font-size: 24rpx; color: gray;margin-left: 10rpx;">{{item.addrPhone}}</text>
									<view>
										<text style="font-size: 24rpx; color: gray;">{{item.addrContent}}</text>
									</view>
								</view>
							</view>
							
						</view>
						<button size="default" type="default"
							style="color:#ffffff;backgroundColor:#1AAD19;borderColor:#1AAD19;position: fixed; bottom: 15rpx; width: 90%; margin-left:40rpx;" 
							hover-class="is-hover"   @click="toAdd(-1)">添加新地址
						</button>
						<button @click="closeDrawer('showLeft')"><text class="word-btn-white">取消</text></button>
					</view>
			</uni-drawer>
		
		<view class="co-content">
			<view style="height: 20rpx; width: 100%;">
				
			</view>
			<view class="address-selected" @click="toAddress('showLeft')">
				
					<view v-if="address!=null" style="display: flex; justify-content: space-between; align-items: center; margin-left: 10rpx;">
						<view>
							<image src="../../static/address.png" mode="" style="width: 56rpx; height: 56rpx;"></image>
						</view>
						<view style="margin-left: 20rpx; width: 100%; margin-top:0rpx;">
							<view >
								<text>{{address.addrContent}}</text>
							</view>
							<view style="font-size: 26rpx; color: gray; margin-top: 10rpx;">
								<text>
									{{address.addrContact}}
								</text>
								<text>
									{{address.addrPhone}}
								</text>
							</view>
						</view>
						
					</view>
					<view v-if="address!=null" style="width: 40rpx; margin-right: 20rpx; margin-top: 40rpx;">
						<text> > </text>
					</view>
				
				<view v-if="false" style="display: flex; justify-content: center; align-items: center; width: 100%;">
					<p style="color: #00d79c;">点击添加地址</p>
				</view>
				
			</view>
			<view class="od-goods-item" v-for="(item,index) in goodsList" :key="index">
				<view>
					<image :src="item.goodsInfo.goodsPic" style="width: 200rpx; height: 200rpx;"></image>
				</view>
				<view class="cart-item-desc">
					<view style="display: flex; justify-content: space-between;">
						<view style="margin-left: 30rpx;">
							<p style="font-size: 26rpx;">{{item.goodsInfo.goodsName}}</p>
						</view>
					</view>
					<view style="display: flex; justify-content: space-between; margin-left: 30rpx; margin-top: 50rpx;">
						<view class="t-goods-price">
							<text class="t-rmb">¥</text>
							<text class="t-p1">{{ item.goodsInfo.goodsPrice}}</text>
						</view>
						<view style="margin-right: 30rpx;">
							<text>数量×{{item.goodsNum}}</text>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="price-detail">
				<view>
					<text>价格明细</text>
				</view>
				<view v-for="(it,index) in goodsList" :key="index" style="width: 100%; display: flex; justify-content: space-between;font-size: 26rpx; margin-top: 20rpx;">
					<view class="p-d-n">
						{{it.goodsInfo.goodsName}}×{{it.goodsNum}}
					</view>
					<view style="margin-right: 40rpx;">
						<text>¥{{it.goodsInfo.goodsPrice*it.goodsNum}}</text>
					</view>
					
				</view>
				<view style="font-size: 26rpx;margin-top: 20rpx; width: 100%;display: flex; justify-content: space-between;">
					<text>商品总额：</text>
					<text style="margin-right: 40rpx;">¥{{priSum}}</text>
				</view>
			</view>
			
			
		</view>
		<uni-popup ref="popup" background-color="#fff" @change="change">
						<view style="width: 100%; height: 300rpx;">
							<view style="width: 100%; text-align: center;">
								<text style="font-size: 36rpx; font-weight: 700;">收银台</text>
							</view>
							<view style="width: 100%; margin-top: 20rpx; text-align: center;">
								<view style="height: 50rpx; line-height: 80rpx; margin-left: 15rpx;">
									<text>实付金额：
										<text style="color: red;">¥{{priSum}}</text>
									</text>
								</view>
								<view @click="toPay()" style="margin-top: 60rpx;">
									<view style="width: 400rpx; height: 80rpx; line-height: 80rpx; background-color: #00d79c; border-radius: 15rpx; margin-left: 200rpx;">
										立即支付
									</view>
								</view>
							</view>
						</view>
		</uni-popup>
		<view class="footer">
			<view style="height: 50rpx; line-height: 80rpx; margin-left: 15rpx;">
				<text>实付金额：
					<text style="color: red;">¥{{priSum}}</text>
				</text>
			</view>
			<view>
				<view style="margin-right: 20rpx;margin-bottom: 30rpx;">
					<fui-button radius="30rpx" btnSize="mini" style="height: 50rpx;" background="#00ed0c" @click="createOrder()">递交订单</fui-button>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
   import fuiButton from "@/components/firstui/fui-button/fui-button.vue"
import { request } from "../../utils/request"
	export default {
		components:{
				fuiButton
		},
		data() {
			return {
				showLeft: false,
				priSum:0,
				orderId:[],
				goodsList:[],
				addressList:[
					{
						userId:1,
						addrId:1,
						addrContact:'周佳成',
						userSex:0,
						addrPhone:'12345678910',
						addrContent:"南昌大学软件学院"
					},
					{
						userId:1,
						addrId:2,
						addrContact:'耿星星',
						userSex:0,
						addrPhone:'12345678910',
						addrContent:"南昌大学软件学院"
					},
				],
				userId:1,
				address:{
					userId:1,
					addrId:1,
					addrContact:"周佳成",
					userSex:0,
					addrPhone:"12345678910",
					addrContent:"南昌大学软件学院"
				}
				
			}
		},
		onLoad(options){
			console.log( this.$store.state.selectedData)
			this.goodsList = this.$store.state.selectedData
			for(var i = 0; i<this.goodsList.length;i++){
				this.priSum = this.priSum + this.goodsList[i].goodsInfo.goodsPrice*this.goodsList[i].goodsNum
			}
			this.request({
				url:"/base-position/list",
				method:'GET',
				data:{
				     
				},
				
			}).then(res=>{
				if(res.code==='1'){
					console.log("成功")
					this.addressList = res.data
					this.address = this.addressList[0]
				}
				else{
					console.log("失败")
				}
			}).catch(()=>{
				console.log("系统错误")
			
			})
			
		},
		methods: {
			createOrder(){
				console.log(typeof(this.goodsList))
				
				//提交订单，封装订单信息
				this.$refs.popup.open('bottom')
				this.request({
					url:"/base-info/add",
					method:'POST',
					data:this.$store.state.selectedData
					
					
				}).then(res=>{
					if(res.code==='1'){
						console.log("成功")
						this.orderId = res.data
					}
					
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				
				})
			},
			
				toPay()
					{
						this.request({
							url:"/base-info/change",
							method:"PUT",
							data:this.orderId
						}).then(res=>{
					if(res.code==='1'){
						console.log("成功")
					}
					
					else{
						console.log("失败")
					}
				}).catch(()=>{
					console.log("系统错误")
				
				})
				uni.navigateTo({
					url:"/pages/pay-view/pay-view"
				})
									
									},
			toAddress(e) {
							this.$refs[e].open()
						},
						// 关闭窗口
			closeDrawer(e) {
						this.$refs[e].close()
				},
			change(e, type) {
						
						this[type] = e
					},
			toAdd(index){
				uni.navigateTo({
					url:'/pages/add_position/add_position?addrData='
				})
			},
			chooseAddr(index){
				this.address = this.addressList[index]
				this.closeDrawer('showLeft')
			}
		}
	}
</script>

<style scoped>
.od-goods-item {
	display: flex;
	justify-content: space-around;
	padding-bottom: 30rpx;
	padding-top: 24rpx;
	border-bottom: #f1f1f1 solid 2rpx;
	background-color: #fff;
	margin-left: 20rpx;
	margin-right: 20rpx;
	margin-top: 20rpx;
	border-radius: 20rpx;
}
.price-detail {
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	margin-left: 20rpx;
	background-color: #fff;
	margin-top: 20rpx;
	margin-right: 20rpx;
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}
.price-detail view{
	margin-left: 20rpx;
}
.p-d-n {
	width: 560rpx;
}
.footer {
	position: fixed;
	bottom: 10rpx;
	display: flex;
	justify-content: space-between;
	width: 100%;
	height: 70rpx;
	background-color: #fff;
}
.address-selected{
	display: flex;
	margin-left: 20rpx;
	justify-content: space-between;
	background-color: #fff;
	height: 150rpx;
	margin-top: 10rpx;
	margin-right: 20rpx;
	border-radius: 15rpx;
}
.addrs-item {
	  border-bottom: #f1f1f1f1 solid 2rpx;
	  width: 100%;
	  padding-bottom: 24rpx;
	  margin-top: 24rpx;
	  margin-bottom: 24rpx;
	  margin-left: 24rpx;
  }
  .is-hover {
  	color: rgba(255, 255, 255, 0.6);
  	background-color: #179b16;
  	border-color: #179b16;
    }
</style>
